<template>
  <div>

    <el-form :model="form" label-width="80px" status-icon :inline="true" style="margin-left: 10%;margin-top:5px">
      <el-form-item prop="name">
        <el-input v-model="form.name" style="width: 220px;" autocomplete="off" placeholder="请输入分类名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="onSubmit" style="margin-left: 10px;">添加</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border style="width: 80%;margin-top:20px;margin-left:10%;text-align:center;border-radius:10px;margin-right:20%;padding-left:10%">
      <el-table-column
        prop="id"
        width="150">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="220">
      </el-table-column>
      <el-table-column
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-popconfirm
            icon="el-icon-info"
            icon-color="red"
            title="确定删除吗？"
            @confirm="deleteType(scope.row.id)"
          >
            <el-button plain size="small" slot="reference" type="danger" style="margin-right: 10px;">删除</el-button>
          </el-popconfirm>
          <el-button plain @click="open(scope.row.id)" type="primary" size="small">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="page"
      layout="prev, pager, next"
      page-size=7
      :total="typeNumber"
      :page-count="typePage"
      style="margin-top: 30px;margin-left:30%">
    </el-pagination>
    <el-dialog title="修改" :visible.sync="dialogFormVisible" style="width: 80%;">
      <el-form :model="update" style="text-align: center;">
        <el-form-item disabled="disabled" label="分类编号" :label-width="50" style="padding-right:100px">
          <el-input disabled="disabled" :value="update.id" autocomplete="off" style="width: 220px;color:black"></el-input>
        </el-form-item>
        <el-form-item label="分类名称" :label-width="50" style="padding-right:100px">
          <el-input v-model="update.name" autocomplete="off" style="width: 220px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateType">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
    name:'BlogType',
    data(){

      return{
        tableData:[],
        form:{
          name:''
        },
        update:{
          id:'',
          name:''
        },
        typeNumber:0,
        typePage:0,
        currentpage:1,
        dialogFormVisible:false,
        
      }
    },
    created(){
      this.getTypes()
    },
    methods:{
      open(id){
        this.dialogFormVisible=true
        this.update.id=id
      },
      updateType(){
        console.log("修改了"+this.update)
        if(this.update.name==null || this.update.name==''){
          this.$notify.warning("提交的名称不能为空哦")
        }
        else if(this.update.id==1){
          this.$notify.warning("抱歉，不能修改默认分类")
        }
        else{
          request.post('/admin/upType',this.update).then((res) => {
            if(res.code == '200'){
              this.page(this.currentpage)
              this.$notify.success(res.msg)
              this.update={}
              this.dialogFormVisible=false
            }else{
              this.$notify.error(res.msg)
            }
          })
        }
        
      },
      deleteType(val){
        console.log("删除了"+val)
        if(val==1||val=='1'){
          this.$notify.error("抱歉，默认分类不能删除哦")
        }
        else{
          request.get(`/admin/deType?id=${val}`).then((res) => {
            if(res.code == '200'){
              this.$notify.success("删除成功！！")
              this.page(this.currentpage)
            }else{
              this.$notify.error("删除失败！！")
            }
          })
        }
        
      },
      page(page){
        console.log(page)
        this.currentpage=page
        request.get( `/admin/pageType?pageNum=${page}`).then((res) => {
        console.log(res.data)
        this.tableData = res.data.list
      })
      },
      onSubmit(form) {
        
        if(this.form.name==null||this.form.name==''){
          this.$notify.warning("抱歉，提交的名称不能为空哦")
        }else{
          request.post('/admin/addType',this.form).then((res) => {
              if(res.code=='200'){
                this.$notify.success("添加成功~~")
                this.form={}
                this.page(this.currentpage);
              }else{
                this.$notify.error(res.msg)
              }
          })
        }
        
      },
      getTypes(){
        request.get('/admin/types').then((res) => {
          console.log(res)
          this.tableData = res.data.list
          this.typeNumber = res.data.total
          this.typePage = res.data.pages
          console.log(this.typeNumber+"="+this.typePage)
        })
      }
    }
}
</script>